☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

Modifying the Background of a HTML Web Page

16-01-18 Course- HTML5-Simple

Background of an HTML Web page can be modified in many ways, for example, by adding a background color to the Web page or by adding a background image to the Web page.

Adding a Background Color to the Web Page

You can add either a predefined color value or a color name as the background color for an HTML Web page, using the bgcolor attribute of the <body> element.

Hexa Color List for each of the W3C predefined colors:

Color Name

Values (Hexa)

Aqua

#00ffff

Black

#00000

Blue

#0000ff

Fuchsia

#ff00ff

Gray

#808080

Green

#008000

Lime

#00ff00

Maroom

#800000

Navy

#000080

Olive

#808000

Purple

#800080

Red

#ff0000

Silver

#c0c0c0

Teal

#008080

White

#ffffff

Yellow

#ffff00

Let’s perform the following steps to add a background color to an HTML Web page:

Open the folder containing your HTML document, as shown in below snapshot Right-click the HTML document and select the Open With->Notepad option from the context menu, as shown in below snapshot

Open with notepad

the HTML document open in the Notepad, as shon in below snapshot:

html code

add the code in body attribute, given below: 


<!DOCTYPE html>
<html>
    <head>
        <title>
            Title of the web page
        </title>
    </head>
    <body bgcolor="blue">
            Contents of the web page
    </body>
</html>

Click File >Save, as shon in below snapshot:

save notepad file

Tip: you can also save the changes in the HTML document by using hte CTRL+S keyboard shortcut.

Click file>Exit, as shown in below snapshot:

exit notepad

open the HTMl document in the Web browser, the background color added by you appears, as shon in below snapshot:

add bg color in web page

Adding a Background Image to the Web page

similar to modifying the background of an HTML Web page by adding a backgrfound color to it, you can also modify the background of an HTML Web page by adding a background image to it.

Let's perfomr the following steps to add a background image to an HTML Web page:

Open your HTML document in Notepad, as shonw below snapshot:

Open HTML Document in NOTEPAD

Add the code, given below:


<!DOCTYPE html>
<html>
    <head>
        <title>
            Title of the web page
        </title>
    </head>
    <body bgcolor="blue" background="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg">
            Contents of the web page
    </body>
</html>

save and close the document.

Now, open the HTML document in the Web browser. The selected image appears in the background, as shon in below snapshot:

HTML page backgrournd image

Now, Let's see how to specify additional information about an HTML Web page.. Click to Next Tutorial

PRV MENU NEXT